<template>
  <el-menu :default-active="$route.path" class="left_menu" :router="true">
    <el-submenu v-for="item in menu" :key="item.key" :index="item.key">
      <template slot="title">
        <i :class="item.Icon"></i>
        <span>{{ item.itemText }}</span>
      </template>
      <el-menu-item v-for="children in item.childrens" :key="children.key" :index="item.parentPath + children.patch">
        {{ children.title }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data () {
    return {
      menu: [
        {
          itemText: '管理员',
          key: 'manage',
          Icon: 'el-icon-warning',
          parentPath: '',
          childrens: [
            {
              patch: '/affairs',
              title: '事项配置'
            },
            {
              patch: '/flow_charts',
              title: '流程管理'
            }
          ]
        },
        {
          itemText: '领导',
          key: 'leader',
          Icon: 'el-icon-warning',
          parentPath: '',
          childrens: [
            {
              patch: '/leader/affair/list',
              title: '待审批事项'
            }
          ]
        },
        {
          itemText: '普通职工',
          key: 'staff',
          Icon: 'el-icon-warning',
          parentPath: '',
          childrens: [
            {
              patch: '/staff/affair/list',
              title: '可申请事项'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less">
.left_menu {
  height: 100%;
  width: 200px;

  a {
    text-decoration: none;
  }
}
.el-submenu__title{
 text-align: left;
}
</style>
